<template>
  <div class="SchoolInformation-task-table">
    <div style="position: relative">
      <el-button class="export-btn" @click="exportExcel">导出</el-button>
    </div>
    <el-table :data="State.SmArr" style="width: 100%" height="90%" id="outTable">
      <el-table-column prop="rank" label="名次" min-width="10%"></el-table-column>
      <el-table-column prop="name" label="姓名" min-width="10%"></el-table-column>
      <el-table-column prop="organization" label="参赛单位" min-width="30%"></el-table-column>
      <el-table-column prop="score1" label="赛项1" min-width="10%"></el-table-column>
      <el-table-column prop="score2" label="赛项2" min-width="10%"></el-table-column>
      <el-table-column prop="score3" label="赛项3" min-width="10%"></el-table-column>
      <el-table-column prop="totalScore" label="总分" min-width="20%"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRef,
  toRefs,
  watch,
  ref,
  nextTick,
  onMounted,
  toRaw,
} from "vue";
import { postData } from "@/assets/js/pubilcs.js";
import FileSaver from "file-saver";
import { read, utils, WorkSheet, writeFile, writeFileXLSX, write } from "xlsx";
export default defineComponent({
  name: "SchoolInformation",
  components: {},
  props: {
    CompetitionId: {
      type: Number,
      default: {},
    },
  },

  setup(props, ctx) {
    let State = reactive({
      SmArr: [],
    });
    // 导出
    // function exportExcel() {
    //   const data = utils.json_to_sheet(State.SmArr); //此处tableData.value为表格的数据
    //   const wb = utils.book_new();
    //   utils.book_append_sheet(wb, data, "成绩汇总"); //test-data为自定义的sheet表名
    //   writeFile(wb, "testTestList.xlsx");
    // }
    function exportExcel() {
      console.log('触发了导出');
      let xlsxParam = { raw: true }; //转换成excel时，使用原始的格式
      let wb = utils.table_to_book(
        document.querySelector("#outTable"),
        xlsxParam
      ); //outTable为列表id
      let wbout = write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "成绩汇总.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    }
    // 获取列表数据
    function obtainList() {
      console.log('???????????props.CompetitionId',props.CompetitionId);
      
      postData(
        "/api/SkillsContest/GetTotalScoreByMatchId",
        JSON.stringify({ Id: props.CompetitionId }),
        sessionStorage.getItem("token")
      )
        .then(function (rep) {
          console.log(rep, "回调");
          if (rep.result.result && rep.result.result.length !== 0) {
            State.SmArr = rep.result.result;
          } else {
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }
    onMounted(() => {
      obtainList();
    });
    return {
      State,
      obtainList,
      exportExcel,
    };
  },
});
</script>
<style lang="less">
.SchoolInformation-task-table {
  position: absolute;
  width: 96%;
  height: 100%;
  left: 25px;
  top: 50px;
}

.SchoolInformation-task-table .el-table {
  width: 96%;
  height: 90%;
  overflow: auto;
}

.SchoolInformation-task-table .el-table .cell {
  text-align: center;
}

.SchoolInformation-task-table-detailed:hover {
  background: linear-gradient(90deg, #807de1, #218cde);
  color: #ffff;
}

.export-btn {
  position: absolute;
  top: -40px;
  right: 60px;
  z-index: 999;
}

.export-btn:hover {
  background: linear-gradient(90deg, #807de1, #218cde);
  color: #ffff;
}
</style>
